<!--todo 可尝试自行封装通用组件-->
<template>
    <el-table
        :data="orderData"
        border
        stripe
    >
        <el-table-column
            prop="username"
            min-width="30px"
            label="用户">
            <template #default="scope">
                <div class="senduserWrap" v-if="scope.row.senduser">
                    <p v-for="i in scope.row.senduser">{{i}}</p>
                </div>
                <span v-else>{{scope.row.username}}</span>
            </template>
        </el-table-column>
        <!--<el-table-column
            prop="platform"
            min-width="30px"
            label="平台">
            <template #default="scope">
                <div v-if="scope.row.platform">
                    {{(platformData.find(i=>i.value===scope.row.platform) || {}).label}}
                </div>
            </template>
        </el-table-column>-->
        <el-table-column
            label="点餐详情">
            <template #default="scope">
                <div>
                    <div class="lineItem" v-for="(i,index) in orderTimeMap">
                        <span v-if="scope.row.price">{{i}}
                            <span v-if="scope.row.platform[index]">（{{(platformData.find(i=>i.value===scope.row.platform[index]) || {}).label}}）</span>：
                        </span>
                        <span v-if="scope.row.code">{{scope.row.code[index]}}</span>
                        <span v-if="scope.row.name">{{scope.row.name[index]}}</span>
                        <span v-if="scope.row.price">{{scope.row.price[index]}}</span>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column
            prop="price"
            min-width="30px"
            label="价格">
            <template #default="scope">
                <div v-if="scope.row.price">
                    {{evil(scope.row.price.map(p=>evil(p.split(',').join('+'))).join('+'))}}
                </div>
            </template>
        </el-table-column>
        <el-table-column
            prop="price"
            min-width="30px"
            label="状态">
            <template #default="scope">
                <!--<span :style="{color:orderStatusInfo[scope.row.username]?'red':statusData.color[scope.row.status]}">
                    {{orderStatusInfo[scope.row.username] ? '状态异常' : statusData.text[scope.row.status]}}
                </span>-->
                <div :style="{color:statusData.color[scope.row.status]}">
                    {{statusData.text[scope.row.status]}}
                </div>
                <div v-if="scope.row.senduser || scope.row.operateUser && (scope.row.operateUser!==scope.row.username)">
                    {{scope.row.senduser?'拼团订单':'代点订单'}}
                </div>
                <template v-if="scope.row.isAudit">
                    <div v-for="i in scope.row.isAudit" :style="{color:auditData.color[i]}">
                        <span>{{auditData.text[i]}}</span>
                    </div>
                </template>
            </template>
        </el-table-column>
        <el-table-column
            min-width="80px"
            prop="balance"
            label="余额">
            <template #default="scope">
                <div class="balanceInfoWrap" v-if="scope.row.balanceInfo">
                    <p v-for="i in scope.row.balanceInfo">{{`${i.log}${i.remark && `（${i.remark}）`}`}}</p>
                </div>
                <div class="balanceInfo">
                    <span v-if="!scope.row.senduser">{{scope.row.balance}}</span>
                    <span>{{scope.row.create_time}}</span>
                </div>
                <div class="balanceInfoWrap" v-if="scope.row.remark">
                    <p v-for="i in scope.row.remark">{{i}}</p>
                </div>
            </template>
        </el-table-column>
        <el-table-column
            min-width="30px"
            prop="balance"
            label="备注">
            <template #default="scope">
                <div class="balanceInfoWrap" v-if="scope.row.note">
                    <p v-for="i in scope.row.note">{{i}}</p>
                </div>
            </template>
        </el-table-column>
        <el-table-column v-for="i in tableSlots"
            :min-width="i.minWidth"
            :key="i.prop"
            :prop="i.prop"
            :label="i.label">
            <template #default="scope">
                <slot :name="i.prop" :row="scope.row"></slot>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
const evil = window.eval;
import {mapGetters} from "vuex";

export default {
    name: "orderInfo",
    computed: {
        ...mapGetters([
            'auditData',
            'statusData',
            'orderStatusInfo',
            'orderTimeMap'
        ])
    },
    props:['orderData','tableSlots','platformData'],
    methods: {
        evil,
    }
}
</script>
<style lang="scss" scoped>
     >>> .balanceInfo {
        display: flex;
        justify-content: space-between;
    }
</style>